<template>
    <div class="order-report" :style="`padding: 0 ${isMobile ? 8 : 20}px`">
        <el-card shadow="never" style="margin-bottom: 20px;padding-top: 20px;">
            <el-form @submit.native.prevent ref="formSearch" :inline="true" :model="formSearch" label-width="90px">
                <div class="search-wrap">
                    <div class="search-item" :class="{left: !isMobile}">
                        <el-form-item label="仓库" prop="depot">
                            <el-select
                                v-model="formSearch.depot"
                                filterable
                                clearable
                                placeholder="请选择"
                                style="width: 322px"
                                @keyup.enter.native="getList"
                            >
                                <el-option
                                    v-for="item in optionsDepots"
                                    :key="item._id"
                                    :label="item.name"
                                    :value="item._id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <div class="search-item" :class="{left: !isMobile}">
                        <el-form-item label="时间类型" prop="dateType">
                            <el-select
                                v-model="formSearch.dateType"
                                filterable
                                placeholder="请选择"
                                style="width: 322px"
                                @keyup.enter.native="getList"
                            >
                                <el-option
                                    v-for="item in optionsDateTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div class="search-wrap">
                    <div class="search-item" :class="{left: !isMobile}">
                        <el-form-item label="时间区间" prop="startDate">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                format="yyyy/MM/dd"
                                prefix-icon="false"
                                v-model="formSearch.startDate"
                                :clearable="true"
                                class="custom-the-datepicker"
                                style="width: 88px;margin-right: 5px;"
                                @change="onChangeDate($event, 'startDate')"
                                @keyup.enter.native="getList"
                            ></el-date-picker>
                            <el-time-select
                                prefix-icon="false"
                                placeholder="起始时间"
                                v-model="formSearch.startTime"
                                class="custom-the-datepicker"
                                style="width: 60px;"
                                :clearable="false"
                                :picker-options="{
                                    start: '00:00',
                                    step: '01:00',
                                    end: '24:00'
                                }"
                                @change="onChangeDate($event, 'startTime')"
                                @keyup.enter.native="getList"
                            >
                            </el-time-select>
                            <span style="display: inline-block; padding: 0 5px;">-</span>
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                format="yyyy/MM/dd"
                                prefix-icon="false"
                                v-model="formSearch.endDate"
                                :clearable="true"
                                class="custom-the-datepicker"
                                style="width: 88px;margin-right: 5px;"
                                @change="onChangeDate($event, 'endDate')"
                                @keyup.enter.native="getList"
                            ></el-date-picker>
                            <el-time-select
                                prefix-icon="false"
                                placeholder="结束时间"
                                v-model="formSearch.endTime"
                                class="custom-the-datepicker"
                                style="width: 60px; margin-right: 5px;"
                                :clearable="false"
                                :picker-options="{
                                    start: '00:00',
                                    step: '01:00',
                                    end: '24:00'
                                }"
                                @change="onChangeDate($event, 'endTime')"
                                @keyup.enter.native="getList"
                            >
                            </el-time-select>
                        </el-form-item>
                    </div>
                    <div class="search-item" :class="{left: !isMobile}">
                        <el-form-item label="时间快捷项" prop="selectMenu">
                            <el-select
                                style="width: 322px"
                                v-model="formSearch.selectMenu"
                                placeholder="请选择"
                                :popper-append-to-body="false"
                                clearable
                                @change="onChangeTimeRange"
                                @clear="onChangeTimeRange('All')"
                                @keyup.enter.native="getList"
                            >
                                <el-option
                                    v-for="item in menuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div class="search-wrap">
                    <div class="search-item" :class="{left: !isMobile}">
                        <el-form-item label="同比数据" prop="yOny">
                            <el-select
                                v-model="formSearch.yOny"
                                placeholder="请选择"
                                style="width: 322px"
                                @keyup.enter.native="getList"
                                @change="setYOnYValue"
                            >
                                <el-option label="百分比%" value="%"> </el-option>
                                <el-option label="数据值" value="CountValue"> </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
                <div class="search-wrap">
                    <div class="search-item" :class="{left: !isMobile}">
                        <el-form-item label="  ">
                            <el-button type="primary" style="min-width: 120px;" @click="getList">查询</el-button>
                            <br v-if="isMobile" />
                            <el-button type="default" style="min-width: 120px;" @click="resetForm('formSearch')"
                                >重置</el-button
                            >
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </el-card>

        <el-row :gutter="20" class="home-total-wrapper">
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="margin-bottom:20px">
                <el-card v-loading="isLoading" style="height: 180px" shadow="never">
                    <div class="home-total-header">
                        <span class="header-title">总收入额</span>
                        <span class="header-icon"><i class="el-icon-warning-outline"></i></span>
                    </div>
                    <div class="home-total-count">
                        <!-- <span class="symbol">¥ </span> -->
                        <span>
                            <CountTo
                                ref="countMoney"
                                :startVal="0"
                                :endVal="countMoney.total"
                                :duration="1500"
                                :decimals="3"
                                :separator="','"
                                :prefix="'¥ '"
                                :autoplay="true"
                            ></CountTo>
                        </span>
                    </div>
                    <div class="home-total-content">
                        <div class="dayOnday-wrapper">
                            <div class="dayOnday-row">
                                <span class="item-label">30日</span>
                                <span class="item-value" :class="countMoney.monthOnMonth >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countMoney.monthOnMonth"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countMoney.monthOnMonth >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                            <div class="dayOnday-row">
                                <span class="item-label">14日</span>
                                <span class="item-value" :class="countMoney.weekOn2Week >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countMoney.weekOn2Week"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countMoney.weekOn2Week >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                            <div class="dayOnday-row">
                                <span class="item-label">7日</span>
                                <span class="item-value" :class="countMoney.weekOnWeek >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countMoney.weekOnWeek"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countMoney.weekOnWeek >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                            <div class="dayOnday-row">
                                <span class="item-label">日</span>
                                <span class="item-value" :class="countMoney.dayOnday >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countMoney.dayOnday"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countMoney.dayOnday >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                        </div>
                    </div>
                    <div class="home-total-detail">
                        <!-- <span class="total-detail-label"></span> -->
                        <span class="total-detail-value">
                            <span class="symbol">平均</span
                            ><CountTo
                                ref="countMoneyLast"
                                :startVal="0"
                                :endVal="countMoney.avaPerDay"
                                :duration="1500"
                                :decimals="3"
                                :separator="','"
                                :prefix="'¥'"
                                :autoplay="true"
                            ></CountTo>
                        </span>
                        <span class="total-detail-label"></span>
                        <span class="total-detail-value">
                            <span class="symbol">当日</span
                            ><CountTo
                                ref="countMoneyLast"
                                :startVal="0"
                                :endVal="countMoney.lastChild"
                                :duration="1500"
                                :decimals="3"
                                :separator="','"
                                :prefix="'¥'"
                                :autoplay="true"
                            ></CountTo>
                        </span>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="margin-bottom:20px">
                <el-card v-loading="isLoading" style="height: 180px" shadow="never">
                    <div class="home-total-header">
                        <span class="header-title">总平均单量/店铺(间)</span>
                        <span class="header-icon"><i class="el-icon-warning-outline"></i></span>
                    </div>
                    <div class="home-total-count">
                        <span class="symbol"></span>
                        <span>
                            <CountTo
                                ref="countMoneyLast"
                                :startVal="0"
                                :endVal="countAvaTotal"
                                :duration="1500"
                                :decimals="2"
                                :separator="','"
                                :prefix="''"
                                :autoplay="true"
                            ></CountTo>
                        </span>
                    </div>
                    <div class="home-total-content"></div>
                    <div class="home-total-detail">
                        <!-- <span class="total-detail-label">当日</span> -->
                        <span class="total-detail-value"
                            ><span class="symbol">当日</span>
                            <CountTo
                                ref="countMoneyLast"
                                :startVal="0"
                                :endVal="countAvaLastChild"
                                :duration="1500"
                                :decimals="2"
                                :separator="','"
                                :prefix="''"
                                :autoplay="true"
                            ></CountTo>
                        </span>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="margin-bottom:20px">
                <el-card v-loading="isLoading" style="height: 180px" shadow="never">
                    <div class="home-total-header">
                        <span class="header-title">总店铺(间)</span>
                        <span class="header-icon"><i class="el-icon-warning-outline"></i></span>
                    </div>
                    <div class="home-total-count">
                        <span class="symbol"></span>
                        <span>
                            <CountTo
                                ref="countStore"
                                :startVal="0"
                                :endVal="countStore.total"
                                :duration="1500"
                                :decimals="0"
                                :separator="','"
                                :prefix="''"
                                :autoplay="true"
                            ></CountTo>
                        </span>
                    </div>
                    <div class="home-total-content">
                        <div class="dayOnday-wrapper">
                            <div class="dayOnday-row">
                                <span class="item-label">30日</span>
                                <span class="item-value" :class="countStore.monthOnMonth >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countStore.monthOnMonth"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countStore.monthOnMonth >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                            <div class="dayOnday-row">
                                <span class="item-label">14日</span>
                                <span class="item-value" :class="countStore.weekOn2Week >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countStore.weekOn2Week"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countStore.weekOn2Week >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                            <div class="dayOnday-row">
                                <span class="item-label">7日</span>
                                <span class="item-value" :class="countStore.weekOnWeek >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countStore.weekOnWeek"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countStore.weekOnWeek >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                            <div class="dayOnday-row">
                                <span class="item-label">日</span>
                                <span class="item-value" :class="countStore.dayOnday >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countStore.dayOnday"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countStore.dayOnday >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                        </div>
                    </div>
                    <div class="home-total-detail" style="margin-top: 0;">
                        <!-- <span class="total-detail-label"></span> -->
                        <span class="total-detail-value">
                            <span class="symbol">当日</span
                            ><CountTo
                                ref="countStoreLast"
                                :startVal="0"
                                :endVal="countStore.lastChild"
                                :duration="1500"
                                :decimals="0"
                                :separator="','"
                                :prefix="''"
                                :autoplay="true"
                            ></CountTo>
                        </span>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="margin-bottom:20px">
                <el-card v-loading="isLoading" style="height: 180px" shadow="never">
                    <div class="home-total-header">
                        <span class="header-title">总订单量</span>
                        <span class="header-icon"><i class="el-icon-warning-outline"></i></span>
                    </div>
                    <div class="home-total-count">
                        <span class="symbol"></span>
                        <span>
                            <CountTo
                                ref="countStore"
                                :startVal="0"
                                :endVal="countOrder.total"
                                :duration="1500"
                                :decimals="0"
                                :separator="','"
                                :prefix="''"
                                :autoplay="true"
                            ></CountTo>
                        </span>
                    </div>
                    <div class="home-total-content">
                        <div class="dayOnday-wrapper">
                            <div class="dayOnday-row">
                                <span class="item-label">30日</span>
                                <span class="item-value" :class="countOrder.monthOnMonth >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countOrder.monthOnMonth"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countOrder.monthOnMonth >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                            <div class="dayOnday-row">
                                <span class="item-label">14日</span>
                                <span class="item-value" :class="countOrder.weekOn2Week >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countOrder.weekOn2Week"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countOrder.weekOn2Week >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                            <div class="dayOnday-row">
                                <span class="item-label">7日</span>
                                <span class="item-value" :class="countOrder.weekOnWeek >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countOrder.weekOnWeek"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countOrder.weekOnWeek >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                            <div class="dayOnday-row">
                                <span class="item-label">日</span>
                                <span class="item-value" :class="countOrder.dayOnday >= 0 ? 'top' : 'bottom'">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="countOrder.dayOnday"
                                        :duration="1500"
                                        :decimals="2"
                                        :separator="','"
                                        :prefix="''"
                                        :suffix="yOnYSuffix"
                                        :autoplay="true"
                                    >
                                    </CountTo>
                                </span>
                                <span
                                    class="item-icon"
                                    :class="`el-icon-${countOrder.dayOnday >= 0 ? 'top' : 'bottom'}`"
                                ></span>
                            </div>
                        </div>
                    </div>
                    <div class="home-total-detail" style="margin-top: 0;">
                        <!-- <span class="total-detail-label"></span> -->
                        <span class="total-detail-value"
                            ><span class="symbol">当日</span>
                            <CountTo
                                ref="countStoreLast"
                                :startVal="0"
                                :endVal="countOrder.lastChild"
                                :duration="1500"
                                :decimals="0"
                                :separator="','"
                                :prefix="''"
                                :autoplay="true"
                            ></CountTo>
                        </span>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="14" :lg="16" :xl="18" style="margin-bottom: 0;">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-card shadow="never" style="height: 275px;">
                            <div v-loading="isLoading" key="MainInMoney" ref="MainInMoney" class="report-item"></div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="margin-bottom: 0;">
                        <el-row :gutter="20">
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-card shadow="never" style="height: 320px;">
                                    <div
                                        v-loading="isLoading"
                                        key="MainStore"
                                        ref="MainStore"
                                        class="report-item"
                                    ></div>
                                </el-card>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-card shadow="never" style="height: 320px;">
                                    <div
                                        v-loading="isLoading"
                                        key="MainOrder"
                                        ref="MainOrder"
                                        class="report-item"
                                    ></div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :xs="24" :sm="12" :md="10" :lg="8" :xl="6">
                <el-card shadow="never" :style="`height: ${isMobile ? 275 : 615}px;`">
                    <el-table
                        :height="275"
                        v-loading="isLoading"
                        :data="tableData"
                        size="small"
                        style="width: 100%"
                        ref="multipleUpdateTable"
                    >
                        <el-table-column type="index" align="center"> </el-table-column>
                        <el-table-column prop="datetime" label="提货日期" sortable>
                            <template v-slot="{row}">
                                {{ row.datetime | formatShortDate }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="store" label="店铺" sortable> </el-table-column>
                        <el-table-column prop="order" label="订单" sortable> </el-table-column>
                        <el-table-column prop="inMoney" label="收入" sortable></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card shadow="never" style="height: 275px;">
                    <div
                        v-loading="isLoading"
                        key="AverageOrderStore"
                        ref="AverageOrderStore"
                        class="report-item"
                    ></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-card shadow="never" style="height: 315px;">
                    <div v-loading="isLoading" key="MainAccInMoney" ref="MainAccInMoney" class="report-item"></div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-card shadow="never" style="height: 315px;">
                    <div key="MainAccOrder" ref="MainAccOrder" class="report-item"></div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                <el-card shadow="never" style="height: 315px;">
                    <div key="MainAccStore" ref="MainAccStore" class="report-item"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import moment from 'moment';
import VueBus, {SET_MENU_SIZE} from '@/utils/VueBus';
import {getApiList} from '@/api/order';
import {getApiList as getDepots} from '@/api/depot';
import {mapGetters} from 'vuex';
import CountTo from 'vue-count-to';
// 同比增长率=（本年的指标值-去年同期的值）÷去年同期的值*100%
echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer
]);

function getYOnYValue() {
    return localStorage.getItem('YOnYValue');
}
function setYOnYValue(value) {
    localStorage.setItem('YOnYValue', value);
}

export default {
    name: 'order-report',
    components: {
        CountTo
    },
    data() {
        return {
            setYOnYValue,
            formSearch: {
                startDate: '',
                startTime: '',
                endDate: '',
                endTime: '',

                selectMenu: 'All', // 'CustomTime' 'LastWeek',
                depot: '',

                numberType: 'order',
                numberStart: '',
                numberEnd: '',

                yOny: 'CountValue',

                dateType: 'datetime',
                keyName: 'remark',
                keyValue: '',
                pageSize: 30000,
                page: 1,
                count: 0
            },
            keyOptions: [
                // {label: '提货日期', value: 'datetime', disabled: false},
                // {label: '店铺（间）', value: 'store', disabled: false},
                // {label: '每日单量', value: 'order', disabled: false},
                // {label: '仓库名称', value: 'depotInfo.name', disabled: false},
                {label: '备注', value: 'remark', disabled: false}
            ],
            tableData: [],
            isLoading: false,
            visibleDetail: false,
            title: '添加',
            dialogVisible: false,
            dialogLoading: false,
            optionsDepots: [],
            optionsDateTypes: [
                {label: '提货日期', value: 'datetime'}
                // {label: '操作时间', value: 'operatorDate'},
                // {label: '创建时间', value: 'date'}
            ],
            optionsNumberTypes: [
                {label: '每日单量', value: 'order'},
                {label: '店铺（间）', value: 'store'}
            ],
            countMoney: {
                total: 0,
                avaPerDay: 0,
                lastChild: 0,
                dayOnday: 0, // 日同比
                weekOnWeek: 0, // 周同比
                weekOn2Week: 0, // 14日同比
                monthOnMonth: 0 // 30日同比
            },
            countStore: {
                total: 0,
                avaPerDay: 0,
                lastChild: 0,
                dayOnday: 0, // 日同比
                weekOnWeek: 0, // 周同比
                weekOn2Week: 0, // 14日同比
                monthOnMonth: 0 // 30日同比
            },
            countOrder: {
                total: 0,
                avaPerDay: 0,
                lastChild: 0,
                dayOnday: 0, // 日同比
                weekOnWeek: 0, // 周同比
                weekOn2Week: 0, // 14日同比
                monthOnMonth: 0 // 30日同比
            }
        };
    },
    computed: {
        ...mapGetters({
            isMobile: 'app/isMobile'
        }),
        countAvaTotal() {
            const countStore = this.countStore;
            const countOrder = this.countOrder;
            if (countStore.total === 0) {
                return 0;
            }
            return countOrder.total / countStore.total;
        },
        countAvaLastChild() {
            const countStore = this.countStore;
            const countOrder = this.countOrder;
            if (countStore.lastChild === 0) {
                return 0;
            }
            return countOrder.lastChild / countStore.lastChild;
        },
        isPercentage() {
            return this.formSearch.yOny === '%';
        },
        yOnYSuffix() {
            return this.isPercentage ? '%' : '';
        }
    },
    created() {
        this.formSearch.yOny = getYOnYValue();

        const result = new Array(12).fill('').map((item, index) => {
            const month = (index + 1).toString();
            return {
                label: `${month}月份`,
                value: `${month}`,
                method: (month => () => {
                    month = month.padStart(2, '0');
                    const startDate = moment().format(`YYYY-${month}-01`);
                    const endDate = moment(startDate)
                        .endOf('month')
                        .format('YYYY-MM-DD');

                    this.formSearch = {
                        ...this.formSearch,
                        startDate: startDate,
                        startTime: '00:00',
                        endDate: endDate,
                        endTime: '24:00'
                    };
                })(month)
            };
        });

        this.menuOptions = [
            {
                label: '所有时间',
                value: 'All',
                method: () => {
                    this.formSearch = {
                        ...this.formSearch,
                        startDate: '',
                        startTime: '',
                        endDate: '',
                        endTime: ''
                    };
                }
            },
            {label: '自定义时间', value: 'CustomTime', method: () => {}},
            {
                label: '今天',
                value: 'Today',
                method: () => {
                    const startDate = moment().format('YYYY-MM-DD');
                    const endDate = startDate;

                    this.formSearch = {
                        ...this.formSearch,
                        startDate: startDate,
                        startTime: '00:00',
                        endDate: endDate,
                        endTime: '24:00'
                    };
                }
            },
            {
                label: '昨天',
                value: 'Yesterday',
                method: () => {
                    const startDate = moment()
                        .add(-1, 'days')
                        .format('YYYY-MM-DD');
                    const endDate = startDate;

                    this.formSearch = {
                        ...this.formSearch,
                        startDate: startDate,
                        startTime: '00:00',
                        endDate: endDate,
                        endTime: '24:00'
                    };
                }
            },
            {
                label: '最近一月',
                value: 'LastMonth',
                method: () => {
                    const startDate = moment()
                        .add(-30, 'days')
                        .format('YYYY-MM-DD');
                    const endDate = moment().format('YYYY-MM-DD');

                    this.formSearch = {
                        ...this.formSearch,
                        startDate: startDate,
                        startTime: '00:00',
                        endDate: endDate,
                        endTime: '24:00'
                    };
                }
            }
        ];
        this.menuOptions.push(...result);

        // const selectMenu = `${moment().format('MM') - 0}`;
        // this.formSearch.selectMenu = selectMenu;

        // const target = this.menuOptions.find(item => item.value === selectMenu);
        // target && target.method();
        this.getDepots().then(res => {
            // const data = res.find(item => item.name === '诗洞配送服务站');
            // if (data) {
            //     this.formSearch.depot = data._id;
            // }
        });
        this.getList();
    },
    mounted() {
        const chartAverageOrderStore = this.$refs.AverageOrderStore;
        const chartMainOrder = this.$refs.MainOrder;
        const chartMainStore = this.$refs.MainStore;
        const chartMainAccStore = this.$refs.MainAccStore;
        const chartMainAccOrder = this.$refs.MainAccOrder;
        const chartMainInMoney = this.$refs.MainInMoney;
        const chartMainAccInMoney = this.$refs.MainAccInMoney;
        const myChartchartAverageOrderStore = echarts.init(chartAverageOrderStore);
        const myChartMainOrder = echarts.init(chartMainOrder);
        const myChartMainStore = echarts.init(chartMainStore);
        const myChartMainAccStore = echarts.init(chartMainAccStore);
        const myChartMainAccOrder = echarts.init(chartMainAccOrder);
        const myChartMainInMoney = echarts.init(chartMainInMoney);
        const myChartMainAccInMoney = echarts.init(chartMainAccInMoney);
        this.myChartchartAverageOrderStore = myChartchartAverageOrderStore;
        this.myChartMainOrder = myChartMainOrder;
        this.myChartMainStore = myChartMainStore;
        this.myChartMainAccStore = myChartMainAccStore;
        this.myChartMainAccOrder = myChartMainAccOrder;
        this.myChartMainInMoney = myChartMainInMoney;
        this.myChartMainAccInMoney = myChartMainAccInMoney;

        window.addEventListener('resize', this.onResize);
        VueBus.$on(SET_MENU_SIZE, this.onSetMenuSize);
    },
    beforeDestroy() {
        this.myChartchartAverageOrderStore = null;
        this.myChartMainOrder = null;
        this.myChartMainStore = null;
        this.myChartMainAccStore = null;
        this.myChartMainAccOrder = null;
        this.myChartMainInMoney = null;
        this.myChartMainAccInMoney = null;
        window.removeEventListener('resize', this.onResize);
        VueBus.$off(SET_MENU_SIZE, this.onSetMenuSize);
    },
    methods: {
        optionMainOrder({dataSources, datetimes, prop, title = ''}) {
            const colors = {
                '6138f28903d3fc3068fe2cf7': '#5470c6',
                '6138f28903d3fc3068fe2cf8': '#91cc75'
            };
            const series = dataSources.map(source => {
                return {
                    ...source,
                    data: source.data.map(item => item[prop]),
                    type: 'line',
                    stack: source.depot,
                    lineStyle: {
                        // width: 2 // 线的宽度 默认为2
                        color: colors[source.depot]
                    },
                    color: colors[source.depot]
                    // color: ['#5470c6', '#91cc75']
                };
            });

            // if (prop === 'accStore' || prop === 'accOrder') {
            //     return {
            //         title: {
            //             text: '', // '单量折线图'
            //             left: 'left',
            //             // padding: [0, 0, 0, 0],
            //             textStyle: {
            //                 fontWeight: 'normal',
            //                 fontSize: 14
            //             }
            //         },
            //         tooltip: {
            //             trigger: 'axis'
            //         },
            //         grid: {
            //             top: '0%',
            //             left: '8px',
            //             right: '8px',
            //             bottom: '0%',
            //             containLabel: true
            //         },
            //         toolbox: {
            //             feature: {
            //                 // saveAsImage: {
            //                 //     title: '',
            //                 // }
            //             }
            //         },
            //         xAxis: {
            //             // type: 'time',
            //             type: 'category',
            //             boundaryGap: false,
            //             axisLabel: {
            //                 show: false
            //             },
            //             data: datetimes // ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            //         },
            //         yAxis: {
            //             type: 'value',
            //             axisLabel: {
            //                 show: false
            //             }
            //         },
            //         series
            //     };
            // }

            return {
                title: {
                    text: title, // '单量折线图'
                    left: 'left',
                    // padding: [0, 0, 0, 0],
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                // legend: {
                //     data: series.map(item => item.name)
                // },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {
                            title: ''
                        }
                    }
                },
                xAxis: {
                    // type: 'time',
                    type: 'category',
                    boundaryGap: false,
                    data: datetimes // ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series
                // series: [
                //     {
                //         name: '南丰仓库',
                //         type: 'line',
                //         stack: '总量',
                //         data: data1.map(item => item[prop]) //  [120, 132, 101, 134, 90, 230, 210]
                //     },
                //     {
                //         name: '诗洞仓库',
                //         type: 'line',
                //         stack: '总量',
                //         data: data2.map(item => item[prop])
                //     }
                // ]
            };
        },
        renderCharts(dataSources, datetimes) {
            const renders = [
                {
                    instance: this.myChartchartAverageOrderStore,
                    prop: 'AveOrderStore',
                    title: '平均订单/店铺（间）'
                },
                {
                    instance: this.myChartMainOrder,
                    prop: 'order',
                    title: '每日订单趋势图'
                },
                {
                    instance: this.myChartMainStore,
                    prop: 'store',
                    title: '店铺（间）趋势图'
                },
                {
                    instance: this.myChartMainAccStore,
                    prop: 'accStore',
                    title: '累计店铺（间）趋势图'
                },
                {
                    instance: this.myChartMainAccOrder,
                    prop: 'accOrder',
                    title: '累计订单趋势图'
                },
                {
                    instance: this.myChartMainInMoney,
                    prop: 'inMoney',
                    title: '每日收入趋势图'
                },
                {
                    instance: this.myChartMainAccInMoney,
                    prop: 'accInMoney',
                    title: '累计收入趋势图'
                }
            ];

            renders.forEach(item => {
                if (!(item.instance && item.instance.setOption)) {
                    return;
                }
                item.instance.setOption(
                    this.optionMainOrder({
                        dataSources,
                        datetimes,
                        prop: item.prop,
                        title: item.title
                    }),
                    true
                );
            });
        },
        onSetMenuSize() {
            clearTimeout(this.timeoutid);
            this.timeoutid = setTimeout(this.onResize, 300);
        },
        onResize() {
            this.myChartchartAverageOrderStore.resize();
            this.myChartMainOrder.resize();
            this.myChartMainStore.resize();
            this.myChartMainAccStore.resize();
            this.myChartMainAccOrder.resize();
            this.myChartMainInMoney.resize();
            this.myChartMainAccInMoney.resize();
        },
        onChangeTimeRange(value) {
            const target = this.menuOptions.find(item => item.value === value);
            if (target && target.method) {
                target.method();
            }
        },
        onChangeDate(value, type) {
            this.formSearch.selectMenu = 'CustomTime';

            if (type === 'startDate' && !value) {
                this.formSearch = {...this.formSearch, startTime: ''};
            }
            if (type === 'startDate' && value && !this.formSearch.startTime) {
                this.formSearch = {...this.formSearch, startTime: '00:00'};
            }
            if (type === 'endDate' && !value) {
                this.formSearch = {...this.formSearch, endTime: ''};
            }
            if (type === 'endDate' && value && !this.formSearch.endTime) {
                this.formSearch = {...this.formSearch, endTime: '24:00'};
            }
        },
        getDepots() {
            const newItem = {page: 1, pageSize: 1000, isDeleted: false, sort: '-date', select: '_id name -operator'};
            return getDepots(newItem)
                .then(({data: res}) => {
                    this.optionsDepots = res.data;
                    return res.data;
                })
                .catch(error => {
                    console.log('error', error);
                });
        },
        // 获取列表数据
        getList() {
            this.isLoading = true;
            const formSearch = this.formSearch;
            const newItem = {
                depot: formSearch.depot || undefined,
                remark: formSearch.remark || undefined,
                pageSize: formSearch.pageSize,
                page: formSearch.page,
                isDeleted: false,
                sort: 'datetime'
            };

            const dateType = formSearch.dateType;
            if (dateType && (formSearch.startDate || formSearch.endDate)) {
                newItem[dateType] = {};

                if (formSearch.startDate) {
                    newItem[dateType].gte = new Date(
                        `${moment(formSearch.startDate).format('YYYY-MM-DD')} ${formSearch.startTime}`
                    ).getTime();
                }
                if (formSearch.endDate) {
                    newItem[dateType].lt = new Date(
                        `${moment(formSearch.endDate).format('YYYY-MM-DD')} ${formSearch.endTime}`
                    ).getTime();
                }
            }
            const numberType = formSearch.numberType;

            if (numberType && (formSearch.numberStart || formSearch.numberEnd)) {
                newItem[numberType] = {};

                if (formSearch.numberStart) {
                    newItem[numberType].gte = formSearch.numberStart - 0;
                }
                if (formSearch.numberEnd) {
                    newItem[numberType].lte = formSearch.numberEnd - 0;
                }
            }

            if (formSearch.keyValue) {
                newItem[formSearch.keyName] = formSearch.keyValue;
            }
            getApiList(newItem)
                .then(({data: res}) => {
                    if (res.status === 200) {
                        const {data, count, page, pageSize} = res;

                        this.tableData = data
                            .reduce((accumulator, item, index) => {
                                const newItem = {...item};
                                if (index === 0) {
                                    newItem.accOrder = item.order || 0;
                                    newItem.accStore = item.store || 0;

                                    // eslint-disable-next-line operator-linebreak
                                    newItem.inMoney =
                                        (
                                            (((item.store || 0) * 3 + ((item.order || 0) * 26) / 100) * 115) / // eslint-disable-line
                                            100
                                        ).toFixed(3) - 0;
                                    // eslint-disable-next-line operator-linebreak
                                    newItem.accInMoney = newItem.inMoney;
                                } else {
                                    // eslint-disable-next-line operator-linebreak
                                    newItem.inMoney =
                                        (
                                            (((item.store || 0) * 3 + ((item.order || 0) * 26) / 100) * 115) / // eslint-disable-line
                                            100
                                        ).toFixed(3) - 0;
                                    // eslint-disable-next-line operator-linebreak
                                    newItem.accInMoney =
                                        ((newItem.inMoney || 0) + (accumulator[accumulator.length - 1].accInMoney || 0)) // eslint-disable-line
                                            .toFixed(3) - 0;
                                }

                                const hit = accumulator.find(
                                    child =>
                                        // eslint-disable-next-line operator-linebreak
                                        moment(newItem.datetime).format('YYYY-MM-DD') ===
                                        // eslint-disable-next-line operator-linebreak
                                        moment(child.datetime).format('YYYY-MM-DD')
                                );
                                if (hit) {
                                    hit.history.push(newItem);
                                    // hit.datetime = newItem.datetime;
                                    hit.order = (hit.order + newItem.order).toFixed(3) - 0;
                                    hit.store = (hit.store + newItem.store).toFixed(3) - 0;
                                    hit.inMoney = (hit.inMoney + newItem.inMoney).toFixed(3) - 0;
                                    hit.accInMoney = newItem.accInMoney.toFixed(3) - 0;
                                } else {
                                    accumulator.push({
                                        datetime: newItem.datetime,
                                        order: newItem.order.toFixed(3) - 0,
                                        store: newItem.store.toFixed(3) - 0,
                                        inMoney: newItem.inMoney.toFixed(3) - 0,
                                        accInMoney: newItem.accInMoney.toFixed(3) - 0,
                                        history: [newItem]
                                    });
                                }

                                return accumulator;
                            }, [])
                            .reverse();

                        let datetimes = [];
                        const dataSources = data.reduce((acc, source) => {
                            source.datetime = moment(source.datetime).format('YYYY-MM-DD');
                            datetimes.push(source.datetime);
                            const hitIndex = acc.findIndex(item => item.depot === source.depot);
                            if (hitIndex !== -1) {
                                acc[hitIndex].data.push(source);
                            } else {
                                acc.push({depot: source.depotInfo._id, name: source.depotInfo.name, data: [source]});
                            }
                            return acc;
                        }, []);

                        datetimes = [...new Set(datetimes)];

                        datetimes.forEach((datetime, index) => {
                            dataSources.forEach(source => {
                                const hitIndex = source.data.findIndex(item => item.datetime === datetime);
                                if (hitIndex === -1) {
                                    source.data.push({datetime});
                                }
                            });
                        });

                        dataSources.forEach(source => {
                            source.data = source.data.sort((a, b) => new Date(a.datetime) - new Date(b.datetime));

                            source.data = source.data.reduce((accumulator, item, index) => {
                                const newItem = {...item};
                                if (index === 0) {
                                    newItem.accOrder = item.order || 0;
                                    newItem.accStore = item.store || 0;

                                    // eslint-disable-next-line operator-linebreak
                                    newItem.inMoney =
                                        (
                                            (((item.store || 0) * 3 + ((item.order || 0) * 26) / 100) * 115) / // eslint-disable-line
                                            100
                                        ).toFixed(3) - 0;
                                    // eslint-disable-next-line operator-linebreak
                                    newItem.accInMoney = newItem.inMoney;
                                } else {
                                    newItem.accStore = (item.store || 0) + accumulator[accumulator.length - 1].accStore;
                                    newItem.accOrder = (item.order || 0) + accumulator[accumulator.length - 1].accOrder;
                                    // eslint-disable-next-line operator-linebreak
                                    newItem.inMoney =
                                        (
                                            (((item.store || 0) * 3 + ((item.order || 0) * 26) / 100) * 115) / // eslint-disable-line
                                            100
                                        ).toFixed(3) - 0;
                                    // eslint-disable-next-line operator-linebreak
                                    newItem.accInMoney =
                                        (
                                            (newItem.inMoney || 0) + // eslint-disable-line
                                            (accumulator[accumulator.length - 1].accInMoney || 0)
                                        ).toFixed(3) - 0;
                                }
                                if (newItem.order === 0 && newItem.store === 0) {
                                    newItem.AveOrderStore = 0;
                                } else {
                                    newItem.AveOrderStore = (newItem.order / newItem.store).toFixed(3) - 0;
                                }
                                accumulator.push(newItem);
                                return accumulator;
                            }, []);
                        });

                        this.renderCharts(dataSources, datetimes);

                        const {countMoney, countAva, countStore, countOrder} = dataSources.reduce(
                            (acc, item) => {
                                let itemLastData = item.data[item.data.length - 1];

                                const itemLastToDayData = item.data[item.data.length - 2];

                                const itemDataReverse = item.data.reverse();
                                const emptyTo0 = value => {
                                    if (value === 0 || typeof value === 'undefined' || Number.isNaN(value)) {
                                        return 0;
                                    } else {
                                        return value;
                                    }
                                };
                                [
                                    ['countMoney', 'inMoney'],
                                    ['countStore', 'store'],
                                    ['countOrder', 'order']
                                ].forEach(([propP, propValue]) => {
                                    acc[propP].lastDayCount += itemLastData ? itemLastData[propValue] : 0;
                                    acc[propP].lastToDayCount += itemLastToDayData ? itemLastToDayData[propValue] : 0;
                                    // sum最近七天
                                    acc[propP].weekCount += itemDataReverse.slice(0, 7).reduce((accumulator, item) => {
                                        return accumulator + emptyTo0(item[propValue]);
                                    }, 0);

                                    // sum上一个七天
                                    acc[propP].weekToCount += itemDataReverse
                                        .slice(7, 14)
                                        .reduce((accumulator, item) => {
                                            return accumulator + emptyTo0(item[propValue]);
                                        }, 0);
                                    // sum最近14天
                                    acc[propP].week2Count += itemDataReverse
                                        .slice(0, 14)
                                        .reduce((accumulator, item) => {
                                            return accumulator + emptyTo0(item[propValue]);
                                        }, 0);
                                    // sum上一个14天
                                    acc[propP].week2ToCount += itemDataReverse
                                        .slice(14, 28)
                                        .reduce((accumulator, item) => {
                                            return accumulator + emptyTo0(item[propValue]);
                                        }, 0);
                                    // sum最近30天
                                    acc[propP].monthCount += itemDataReverse
                                        .slice(0, 30)
                                        .reduce((accumulator, item) => {
                                            return accumulator + emptyTo0(item[propValue]);
                                        }, 0);
                                    // sum上一个30天
                                    acc[propP].monthToCount += itemDataReverse
                                        .slice(30, 60)
                                        .reduce((accumulator, item) => {
                                            return accumulator + emptyTo0(item[propValue]);
                                        }, 0);
                                });
                                itemLastData = itemLastData || {
                                    accInMoney: 0,
                                    inMoney: 0,
                                    accOrder: 0,
                                    order: 0,
                                    accStore: 0,
                                    store: 0
                                };
                                acc.countMoney.total += itemLastData.accInMoney;
                                acc.countMoney.lastChild += itemLastData.inMoney;

                                acc.countOrder.total += itemLastData.accOrder;
                                acc.countOrder.lastChild += itemLastData.order;

                                acc.countStore.total += itemLastData.accStore;
                                acc.countStore.lastChild += itemLastData.store;

                                // acc.countAva.allAva += item.data[item.data.length - 1].accInMoney;
                                return acc;
                            },
                            {
                                countMoney: {
                                    total: 0, // 累计总收入
                                    avaPerDay: 0, // 平均每天收入
                                    lastChild: 0, // 当前最后一天（当日）收入
                                    lastDayCount: 0, // 日同比累计
                                    lastToDayCount: 0, // 日同比累计2
                                    weekCount: 0, // 周同比 (最近七天)
                                    weekToCount: 0, // 周同比2 (上一个七天)
                                    week2Count: 0, // 14日（最近14日）
                                    week2ToCount: 0, // 14日（上一个14日）
                                    monthCount: 0,
                                    monthToCount: 0
                                },
                                countStore: {
                                    total: 0,
                                    avaPerDay: 0,
                                    lastChild: 0,
                                    lastDayCount: 0, // 日同比累计
                                    lastToDayCount: 0, // 日同比累计2
                                    weekCount: 0, // 周同比 (最近七天)
                                    weekToCount: 0, // 周同比2 (上一个七天)
                                    week2Count: 0, // 14日（最近14日）
                                    week2ToCount: 0, // 14日（上一个14日）
                                    monthCount: 0,
                                    monthToCount: 0
                                },
                                countOrder: {
                                    total: 0,
                                    avaPerDay: 0,
                                    lastChild: 0,
                                    lastDayCount: 0, // 日同比累计
                                    lastToDayCount: 0, // 日同比累计2
                                    weekCount: 0, // 周同比 (最近七天)
                                    weekToCount: 0, // 周同比2 (上一个七天)
                                    week2Count: 0, // 14日（最近14日）
                                    week2ToCount: 0, // 14日（上一个14日）
                                    monthCount: 0,
                                    monthToCount: 0
                                },
                                countAva: {allAva: 0, avaPerDay: 0, lastChildAva: 0} // 总平均单量/店铺
                            }
                        );
                        const num = Math.max(...dataSources.map(i => i.data.length));

                        countMoney.avaPerDay = num > 0 ? countMoney.total / num : 0;

                        const isYOnYPercentage = this.isPercentage; // 当前是否是%展示

                        [countMoney, countStore, countOrder].forEach(item => {
                            if (item.lastDayCount === 0) {
                                item.dayOnday = isYOnYPercentage ? -100 : 0;
                            } else {
                                const number = item.lastDayCount - item.lastToDayCount;
                                item.dayOnday = isYOnYPercentage ? (number / item.lastDayCount) * 100 : number;
                            }
                            if (item.weekCount === 0) {
                                item.weekOnWeek = isYOnYPercentage ? -100 : 0;
                            } else {
                                const number = item.weekCount - item.weekToCount;
                                item.weekOnWeek = isYOnYPercentage ? (number / item.weekCount) * 100 : number;
                            }
                            if (item.week2Count === 0) {
                                item.weekOn2Week = isYOnYPercentage ? -100 : 0;
                            } else {
                                const number = item.week2Count - item.week2ToCount;
                                item.weekOn2Week = isYOnYPercentage ? (number / item.week2Count) * 100 : number;
                            }
                            if (item.monthCount === 0) {
                                item.monthOnMonth = isYOnYPercentage ? -100 : 0;
                            } else {
                                const number = item.monthCount - item.monthToCount;
                                item.monthOnMonth = isYOnYPercentage ? (number / item.monthCount) * 100 : number;
                            }
                        });

                        this.countMoney = countMoney;
                        this.countStore = countStore;
                        this.countOrder = countOrder;
                        this.countAva = countAva;

                        // this.$refs.countMoney.start();

                        this.formSearch = {...this.formSearch, page, pageSize, count};
                    }
                })
                .catch(error => {
                    console.log(error);
                })
                .finally(() => (this.isLoading = false));
        },
        resetForm(formName) {
            const formSearch = this.$options.data().formSearch;

            console.log('formSearch :>> ', formSearch);

            this.formSearch = {...this.formSearch, ...formSearch};
        }
    }
};
</script>
<style lang="scss" scoped>
.order-report {
    padding: 0 20px;
    ::v-deep {
        .el-card {
            border-radius: 0;
            border: none;
            overflow: unset;
        }
        .el-card__body {
            display: flex;
            flex-flow: column nowrap;
            height: inherit;
            padding: 0;
            box-sizing: border-box;
        }
        .cell {
            padding: 0 !important;
        }
    }
}
::v-deep {
    .el-col {
        margin-bottom: 20px;
    }
}
.report-item {
    flex: 1;
    height: 320px;
}
.home-total-wrapper {
    ::v-deep {
        .el-card__body {
            padding: 8px 8px 8px 8px;
        }
    }
    .home-total-header {
        display: flex;
        flex-flow: row nowrap;
        color: rgba(0, 0, 0, 0.45);
        white-space: nowrap;
        font-size: 14px;
        line-height: 22px;
        .header-icon {
            margin-left: auto;
            cursor: pointer;
        }
    }
    .home-total-count {
        font-size: 30px;
        line-height: 38px;
        white-space: nowrap;
        color: rgba(0, 0, 0, 0.85);
    }
    .home-total-content {
        flex: 1;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-end;
        .dayOnday-wrapper {
            display: flex;
            flex-flow: row wrap;
            .dayOnday-row {
                display: flex;
                align-items: center;
                white-space: nowrap;
                span.item-label {
                    // margin-right: 8px;
                    font-size: 14px;
                    line-height: 22px;
                    color: rgba(0, 0, 0, 0.45);
                }
                span.item-value {
                    font-size: 14px;
                    line-height: 22px;
                    color: rgba(0, 0, 0, 0.85);
                    &.top {
                        color: #f00;
                    }
                    &.bottom {
                        color: rgb(82, 196, 26);
                    }
                }
                span.item-icon {
                    font-size: 10px;
                    margin-left: 2px;
                }
                span.el-icon-top {
                    font-weight: 600;
                    color: #f00;
                }
                span.el-icon-bottom {
                    font-weight: 600;
                    color: rgb(82, 196, 26);
                }
            }
            .dayOnday-row {
                margin-right: 6px;
            }
            .dayOnday-row:last-child {
                margin-right: 0px;
            }
        }
    }
    .home-total-detail {
        margin-top: 12px;
        padding-top: 8px;
        font-size: 14px;
        white-space: nowrap;
        line-height: 22px;
        box-sizing: border-box;
        border-top: 1px solid #f0f0f0;
        color: rgba(0, 0, 0, 0.85);
        .total-detail-label {
            display: inline-block;
            margin-right: 4px;
        }
        .total-detail-value {
            white-space: nowrap;
            .symbol {
                color: rgba(0, 0, 0, 0.45);
            }
        }
    }
}
</style>
